<template>
	<view class="content">
		<view class="shop-info-top">
			<!-- 商家环境图横向滑动 -->
			<scroll-view class="shop-images-scroll" scroll-x="true">
				<view class="shop-images">
					<image v-for="(img, idx) in shopImages" :key="idx" :src="img" class="shop-image"></image>
					<view class="shop-video-flag">
						<text class="video-flag">打卡视频 24</text>
					</view>
				</view>
			</scroll-view>
			<!-- 商家基础信息 -->
			<view class="shop-base-info">
				<view class="shop-title-row">
					<text class="shop-title">福润轩・SPA</text>
				</view>
				<view class="shop-rate-row">
					<view class="shop-rate">
						<text class="star">★</text>
						<text class="rate-num">4.5</text>
						<text class="rate-desc">非常棒 28条评价</text>
					</view>
					<text class="shop-category">足疗 / 按摩</text>
				</view>
				<view class="shop-rank-row">
					<text class="shop-rank">莲池区足疗按摩收藏榜第6名</text>
					<text class="shop-favor">收藏 200+</text>
				</view>
				<view class="shop-biz-row">
					<text class="shop-biz-status">营业中 11:45 - 24:00</text>
					<text class="shop-biz-service">免费停车・有简餐</text>
					<button class="shop-detail-btn" @click="showShopDetail = !showShopDetail">详情</button>
				</view>
				<view class="shop-address-row">
					<view class="shop-address-info">
						<text class="shop-address">竞秀区东风中路1166号</text>
						<text class="shop-distance">距你5.1公里，驾车22分钟</text>
					</view>
					<view class="shop-address-actions">
						<button class="nav-btn" @click="onNav">导航</button>
						<button class="tel-btn" @click="onTel">电话</button>
					</view>
				</view>
				<view v-if="showShopDetail" class="shop-detail-expand">
					<text>商家介绍：福润轩SPA环境优雅，技师专业，服务贴心，适合休闲放松。</text>
				</view>
			</view>
		</view>
		<view class="group-list-area">
			<view class="group-list-title-row">
				<text class="group-list-title">优惠团购</text>
			</view>
			<view class="group-list-tags-row">
				<view v-for="(tag, idx) in groupTags" :key="idx" :class="['group-tag', {active: groupTagActive === idx}]" @click="onGroupTag(idx)">{{tag}}</view>
			</view>
			<view class="group-list-items">
				<view v-for="(item, idx) in groupListShow" :key="item.id" class="group-list-item">
					<image :src="item.img" class="group-item-img"></image>
					<view class="group-item-info">
						<text class="group-item-title">{{item.title}}</text>
						<text class="group-item-detail">{{item.detail}}</text>
						<text class="group-item-time">{{item.time}}</text>
						<text class="group-item-sale">已售 {{item.sale || 0}}</text>
						<view class="group-item-price-row">
							<text class="group-item-coupon">券后</text>
							<text class="group-item-price">¥{{item.price}}</text>
							<text class="group-item-origin">¥{{item.origin}}</text>
						</view>
						<text v-if="item.discount > 0" class="group-item-discount">付费开通券包减 {{item.discount}} 共省 {{item.save}} 元</text>
						<button class="group-buy-btn" @click="onGroupBuy(item)" :disabled="!item.status">{{item.status ? '不可购买' : '抢购'}}</button>
					</view>
				</view>
				<view class="bottom"></view>
			</view>
		</view>
		<view class="bottom-tab-bar">
			<view v-for="(tab, idx) in tabs" :key="idx" :class="['tab-item', {active: tabActive === idx}]" @click="onTab(idx)">
				<text class="tab-icon">{{tab.icon}}</text>
				<text class="tab-label">{{tab.label}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			showShopDetail: false,
			shopImages: [
				'/static/1.jpg',
				'/static/2.jpg',
				'/static/logo.png',
				'/static/1.jpg',
				'/static/2.jpg'
			],
			shops: [
				{ id: 1, name: '麦当劳', desc: '快餐连锁' },
				{ id: 2, name: '星巴克', desc: '咖啡馆' },
				{ id: 3, name: '海底捞', desc: '火锅餐厅' }
			],
			groupTags: ['全部', '推拿/按摩', '精油SPA', '其它'],
			groupTagActive: 0,
			groupList: [],
			groupListShow: [],
			tabs: [
					{ label: '按摩/足疗', icon: '💆' },
					{ label: '订单', icon: '📦' },
					{ label: '写评价', icon: '📝' }
			],
			tabActive: 0
		}
	},
	computed: {
		groupListShow() {
			if (this.groupTagActive === 0) {
				return this.groupList;
			} else {
				return this.groupList.filter(item => item.tag === this.groupTags[this.groupTagActive]);
			}
		}
	},
	onLoad() {
		// 优惠团购列表数据动态获取
		uni.request({
			url: 'https://vue.maylab.top/api/quick-registration/services', // 接口地址
			method: 'GET',
			success: (res) => {
				console.log("🚀 ~ onLoad ~ res.data:", res.data.data)
				if (res.statusCode === 200 && Array.isArray(res.data.data)) {
					const rawList = res.data.data
					// 动态生成分类标签
					const categories = Array.from(new Set(rawList.map(item => item.category)));
					this.groupTags = ['全部', ...categories];
					// 套餐数据处理，tag为分类索引
					this.groupList = rawList.map(item => ({
						id: item._id,
						img: item.image.startsWith('/') ? item.image : '/static/logo.png',
						title: item.name,
						detail: item.description,
						time: `${item.duration}分钟・${item.category}`,
						sale: item.sale || 0,
						price: item.price,
						origin: item.origin || item.price,
						discount: item.discount || 0,
						save: item.save || 0,
						tag: categories.indexOf(item.category) + 1, // 标签索引，+1是因为0为“全部”
						status: item.status // 套餐状态
					}));
					this.groupTagActive = 0;
					this.groupListShow = this.groupList;
					console.log("🚀 ~ onLoad ~ this.groupList:", this.groupList)
				} else {
					console.error('接口返回数据格式错误', res.data);
					uni.showToast({ title: '数据加载失败，请重试', icon: 'none' });
				}
			},
			fail: (err) => {
				console.error('接口请求失败', err);
				uni.showToast({ title: '数据加载失败，请重试', icon: 'none' });
			}
		});
	},
	methods: {
		goDetail(id) {
			uni.navigateTo({
				url: `/pages/shopDetail/shopDetail?id=${id}`
			});
		},
		onNav() {
			// 地图导航
			uni.openLocation({
				latitude: 38.872,
				longitude: 115.484,
				name: '福润轩・SPA',
				address: '竞秀区东风中路1166号'
			});
		},
		onTel() {
			const phoneList = ["18830858849", "17732280882", "15297560572"]
			uni.showActionSheet({
				itemList: phoneList,  //电话列表
				success: function (res) {
					if (res.tapIndex !== undefined) {
						uni.makePhoneCall({
							phoneNumber: phoneList[res.tapIndex],
							success: function () {
								console.log('拨打电话成功');
							},
							fail: function () {
								console.log('拨打电话失败');
							}
						});
					}
				}
			})

		},
		onGroupTag(idx) {
			this.groupTagActive = idx;
			if (idx === 0) {
				this.groupListShow = this.groupList;
			} else {
				this.groupListShow = this.groupList.filter(item => item.tag === idx);
			}
		},
		onGroupBuy(item) {
			// 模拟跳转购买页
			uni.showToast({ title: '跳转购买页（模拟）', icon: 'none' });
		},
		onTab(idx) {
			this.tabActive = idx;
			if (idx === 0) {
				uni.showToast({ title: '按摩/足疗（测试页面）', icon: 'none' });
			} else if (idx === 1) {
				uni.showToast({ title: '订单（测试页面）', icon: 'none' });
			} else if (idx === 2) {
				uni.showToast({ title: '写评价（测试页面）', icon: 'none' });
			}
		}
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.shop-info-top {
	width: 100vw;
	background: #fff;
	padding-bottom: 24rpx;
	box-sizing: border-box;
}

.shop-images-scroll {
	width: 100vw;
	white-space: nowrap;
	margin-bottom: 18rpx;
}

.shop-images {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 16rpx 0 0 16rpx;
}

.shop-image {
	width: 180rpx;
	height: 120rpx;
	border-radius: 16rpx;
	object-fit: cover;
	margin-right: 8rpx;
}

.shop-video-flag {
	display: flex;
	align-items: center;
	margin-left: 8rpx;
}

.video-flag {
	background: linear-gradient(90deg, #ff6a00, #ffb800);
	color: #fff;
	font-size: 22rpx;
	border-radius: 24rpx;
	padding: 6rpx 18rpx;
}

.shop-base-info {
	padding: 0 18rpx;
}

.shop-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.shop-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #222;
}

.shop-rate-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8rpx;
}

.shop-rate {
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.star {
	color: #ff6a00;
	font-size: 24rpx;
}

.rate-num {
	font-size: 24rpx;
	color: #222;
}

.rate-desc {
	font-size: 22rpx;
	color: #666;
}

.shop-category {
	font-size: 22rpx;
	color: #ff6a00;
	margin-left: 12rpx;
}

.shop-rank-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8rpx;
}

.shop-rank {
	font-size: 22rpx;
	color: #666;
}

.shop-favor {
	font-size: 22rpx;
	color: #ff6a00;
}

.shop-biz-row {
	display: flex;
	align-items: center;
	gap: 18rpx;
	margin-bottom: 8rpx;
}

.shop-biz-status {
	font-size: 22rpx;
	color: #ff6a00;
}

.shop-biz-service {
	font-size: 22rpx;
	color: #666;
}

.shop-detail-btn {
	background: #eee;
	color: #222;
	font-size: 22rpx;
	border-radius: 32rpx;
	padding: 8rpx 24rpx;
}

.shop-address-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8rpx;
}

.shop-address-info {
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.shop-address {
	font-size: 22rpx;
	color: #222;
}

.shop-distance {
	font-size: 22rpx;
	color: #666;
}

.shop-address-actions {
	display: flex;
	gap: 12rpx;
}

.nav-btn,
.tel-btn {
	background: #ff6a00;
	color: #fff;
	font-size: 22rpx;
	border-radius: 32rpx;
	padding: 8rpx 24rpx;
}

.shop-detail-expand {
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #444;
	background: #f8f8f8;
	border-radius: 12rpx;
	padding: 12rpx;
}

.shop-list {
	width: 90vw;
	margin-top: 40rpx;
}

.shop-item {
	background: #f8f8f8;
	margin-bottom: 20rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	cursor: pointer;
}

.shop-name {
	font-size: 32rpx;
	font-weight: bold;
}

.shop-desc {
	font-size: 28rpx;
	color: #666;
	margin-left: 20rpx;
}

.group-list-area {
	width: 100vw;
	background: #fff;
	margin-top: 24rpx;
	padding-bottom: 24rpx;
	box-sizing: border-box;
}
.group-list-title-row {
	padding: 0 18rpx;
	margin-bottom: 10rpx;
}
.group-list-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #222;
}
.group-list-tags-row {
	display: flex;
	gap: 18rpx;
	padding: 0 18rpx;
	margin-bottom: 18rpx;
}
.group-tag {
	background: #f8f8f8;
	color: #222;
	font-size: 24rpx;
	border-radius: 32rpx;
	padding: 8rpx 32rpx;
	cursor: pointer;
}
.group-tag.active {
	background: linear-gradient(90deg,#ff6a00,#ffb800);
	color: #fff;
}
.group-list-items {
	padding: 0 18rpx;
	box-sizing: border-box;
}
.group-list-item {
	display: flex;
	align-items: flex-start;
	background: #f8f8f8;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 18rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}
.group-item-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	object-fit: cover;
	margin-right: 18rpx;
}
.group-item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}
.group-item-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #222;
}
.group-item-detail {
	font-size: 24rpx;
	color: #666;
}
.group-item-time {
	font-size: 22rpx;
	color: #888;
}
.group-item-sale {
	font-size: 22rpx;
	color: #ff6a00;
}
.group-item-price-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin: 4rpx 0;
}
.group-item-coupon {
	font-size: 22rpx;
	color: #ff6a00;
	font-weight: bold;
}
.group-item-price {
	font-size: 28rpx;
	color: #e43d33;
	font-weight: bold;
}
.group-item-origin {
	font-size: 22rpx;
	color: #bbb;
	text-decoration: line-through;
}
.group-item-discount {
	font-size: 22rpx;
	color: #ff6a00;
}
.group-buy-btn {
	background: linear-gradient(90deg,#ff6a00,#e43d33);
	color: #fff;
	font-size: 24rpx;
	border-radius: 32rpx;
	padding: 8rpx 32rpx;
	margin-top: 8rpx;
	align-self: flex-start;
}
.bottom-tab-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 100rpx;
	background: #fff;
	box-shadow: 0 -2rpx 8rpx #eee;
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 9999;
}
.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	color: #222;
	font-size: 22rpx;
	padding: 0;
}
.tab-item.active {
	color: #ff6a00;
}
.tab-icon {
	font-size: 32rpx;
	margin-bottom: 2rpx;
}
.tab-label {
	font-size: 22rpx;
}
.bottom{
	width: 200rpx; height: 200rpx; background-color: red;
}
</style>
